<template>
	<view class="avatar content">
		<view class="nav">
			<uni-nav-bar backgroundColor="transparent" left-icon="left" @clickLeft="goback">
				<view class="tab flex_r_between">
					<text @click="onTab(0)" :id="select == 0 ? 'select' : ''">工装头像</text>
					<text @click="onTab(1)" :id="select == 1 ? 'select' : ''">个人相册</text>
				</view>
				<block slot="right">
					<text @click="toAvatar" v-if="select == 0">头像要求</text>
					<text v-if="select==1" @click="upDate">添加</text>
				</block>
			</uni-nav-bar>
		</view>

		<swiper class="swiper" circular @change="onChangeAvatar" :current="select">
			<swiper-item>
				<view class="detail">
					<view class="box">
						<view class="img flex_r_around" v-if="!Array.isArray(this.authInfo.work_clothes_image)">
							<image :src="authInfo.work_clothes_image.image" mode="aspectFill"></image>
							<view class="mengb flex_c"
								v-if="authInfo.work_clothes_image.status == 1 || authInfo.work_clothes_image.status == 3">
								<view class="icon" @click.stop="deleteWork">
									<uni-icons type="clear" :size="30" color="#FFF"></uni-icons>
								</view>
								<!-- status 1 审核中
								status 2 通过
								status 3 未通过 -->
								<view>{{authInfo.work_clothes_image.status == 3 ? '审核未通过' : '审核中'}}</view>
								<text>{{authInfo.work_clothes_image.status == 3 ? '需重新传到位工服照片' : '请耐心等待'}}</text>
							</view>
							<view class="delete" v-else @click="todetail">
								<uni-icons type="clear" :size="26"></uni-icons>
							</view>
						</view>
						<view class="add flex_r_around" v-else @click="toadd">
							<image src="/static/technician/add.png"></image>
						</view>
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true">
					<view class="detail">
						<view class="box">
							<view class="add flex_r_around" v-if="!authInfo.person_images.length" @click="upDate">
								<image src="/static/technician/add.png"></image>
							</view>
							<view class="img flex_r_around" v-for="(item,index) in list" :key="index"
								@click="toVideo(item.image,item.type)">
								<image v-if="item.type == 'img'" :src="item.image" mode="aspectFill"></image>
								<!-- <video v-else style="width: 100%;height: 100%;"  :src="item.image" object-fit="contain"></video> -->
								<image v-else :src="item.image + '?vframe/jpg/offset/8/'" mode="aspectFill"></image>
								<!-- http://xxx.clouddn.com/test.mp4 -->
								<view class="mengb flex_c" :style="item.status != 2 ? '' : 'background:transparent'">
									<view class="icon" @click.stop="deleteIndex(index)">
										<uni-icons type="clear" :size="30" color="#FFF"></uni-icons>
									</view>
									<view v-if="item.status != 2">{{item.status == 1 ? '审核中' : item.status == 0 ? '待提交' : '审核未通过'}}
									</view>
									<text
										v-if="item.status != 2">{{item.status == 1 ? '请耐心等待' : item.status == 0 ? '待提交' : '请删除后重新提交'}}</text>
								</view>
							</view>
							<view class="submit_btn" @click="onSubmit" v-if="list.length">立即上传</view>
						</view>
					</view>
				</scroll-view>
				
			</swiper-item>
		</swiper>



		

		

		<u-action-sheet :list="selectList" v-model="show" @click="onAlbum"></u-action-sheet>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: 1,
				authInfo: '',

				isUpdate: false,
				
				list: [],

				show: false,
				selectList: [{
					text: '上传图片'
				}, {
					text: '上传视频'
				}, ],
				
				flag:true,
			}
		},

		methods: {
			goback() {
				uni.navigateBack()
			},
			onChangeAvatar(e){
				this.select = e.detail.current
			},
			todetail() {
				this.authInfo.work_clothes_image = []
			},
			onTab(e) {
				this.select = e
			},
			toadd(e) {
				let that = this
				that.$util.chooseImage({
					count: 1,
					crop: {
						width: 800,
						height: 800
					}
				}, res => {
					if (res.tempFiles[0].size < 100000) {
						return this.$util.msg('请上传100kb以上的图片保证清晰度')
					}
					uni.showLoading({
						title: '上传头像中',
					})
					res.tempFilePaths.forEach(item => {
						that.$util.upload('picture', item, result => {
							if (result.code == 0) {
								that.request.httpTokenRequest({
									url: "/technician.technician/saveAuthInfo",
									method: "post"
								}, {
									work_clothes_image: JSON.stringify({
										image: result.data.url,
										status: 1,
									})
								}).then(data => {
									that.$util.msg(data.msg)
									if (data.code == 0) {
										uni.hideLoading()
										that.authInfo.work_clothes_image = {
											image: result.data.url,
											status: 1,
										}
									}
								}, error => {})
							}
						})
					})
				})
			},
			toAvatar() {
				uni.navigateTo({
					url: '/technician/personal/avatarRequirements'
				})
			},
			deleteIndex(e) {
				this.list.splice(e, 1)
			},
			deleteWork() {
				this.authInfo.work_clothes_image = []
			},
			onAlbum(e) {
				if (e == 0) {
					this.$util.chooseImage({
						count: 9,
					}, res => {
						uni.showLoading({
							title: '上传头像中',
						})
						res.tempFilePaths.forEach(item => {
							this.$util.upload('picture', item, result => {
								if (result.code == 0) {
									this.list.push({
										image: result.data.url,
										status: 0,
										type: 'img'
									})
									uni.hideLoading()
								}
							})
						})
						uni.hideLoading()
					})
				}
				if (e == 1) {
					this.$util.chooseVideo({
						maxDuration: 30
					}, res => {
						uni.showLoading({
							title: '上传头像中',
						})
						this.$util.upload('video', res.tempFilePath, result => {
							if (result.code == 0) {
								this.list.push({
									image: result.data.url,
									status: 0,
									type: 'video'
								})
								uni.hideLoading()
							}
						})
						uni.hideLoading()
					})
				}
			},
			upDate() {
				this.show = true
			},
			onSubmit() {
				if(!this.flag){return}
				this.list.forEach(item => {
					if (item.status != 2) {
						item.status = 1
					}
				})
				this.flag = false
				this.request.httpTokenRequest({
					url: "/technician.technician/saveAuthInfo",
					method: "post"
				}, {
					person_images: JSON.stringify(this.list)
				}).then(data => {
					if (data.code == 0) {
						this.flag = true
						this.$util.modal(data.msg)
					} else {
						this.$util.msg(data.msg)
					}
				}, error => {})
			},
			toVideo(e, type) {
				if (type == 'img') {
					uni.previewImage({
						urls: [e]
					})
				} else {
					uni.navigateTo({
						url: '/technician/video/video?src=' + e,
					})
				}
			},
		},
		onLoad(option) {
			this.select = option.select
			this.authInfo = uni.getStorageSync('authInfo')
			this.list = this.authInfo.person_images
			this.list.forEach(item => {
				let arr = item.image.split('.')
				if (arr[arr.length - 1] == 'jpg' || arr[arr.length - 1] == 'jpeg' || arr[arr.length - 1] ==
					'png' || arr[arr.length - 1] == 'PNG' || arr[arr.length - 1] == 'JPG') {
					item.type = 'img'
				} else {
					item.type = 'video'
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99;
		padding-top: var(--status-bar-height);
		background: #F5F7F8;

		.tab {
			width: 284rpx;
			height: 50rpx;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 0 2rpx;
			margin: auto;

			text {
				width: 140rpx;
				height: 46rpx;
				background: #FFF;
				border-radius: 32rpx;
				font-size: 24rpx;
				color: #272636;
				line-height: 46rpx;
				text-align: center;
			}

			#select {
				background: #EF5233;
				color: #FFF;
			}
		}
	}

	.avatar {
		min-height: 100vh;
		box-sizing: border-box;
		padding: calc(var(--status-bar-height) + 54px) 30rpx 20rpx;
	}
	
	swiper {
		min-height: calc(100vh - var(--status-bar-height) - 54px - 20rpx);
		scroll-view {
			height: 100%;
		}
	}
	
	.detail {
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 30rpx;
		min-height: 100%;

		.box {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			height:100%;
		}

		.add {
			width: 300rpx;
			height: 300rpx;
			border-radius: 20rpx;
			border: 1rpx solid #D3D3D3;
			margin-bottom: 30rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.img {
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 30rpx;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			.mengb {
				width: 300rpx;
				height: 300rpx;
				background: rgba(0, 0, 0, 0.4);
				position: absolute;
				left: 0;
				top: 0;
				padding: 100rpx 0;
				justify-content: space-between;
				justify-content: space-between;

				.icon {
					position: absolute;
					right: 10rpx;
					top: 25rpx;
				}

				view {
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 40rpx;
				}

				text {
					font-size: 22rpx;
					color: #FFFFFF;
					line-height: 30rpx;
				}
			}

			.delete {
				width: 26px;
				height: 26px;
				position: absolute;
				right: 5rpx;
				top: 5rpx;
			}
		}
	}

	.submit_btn {
		width: 680rpx;
		height: 80rpx;
		background: #EF5233;
		border-radius: 20rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;

	}
</style>